<template>
  <div class="compontClassMange">
    <div class="flexBetweenCenter" style="margin-bottom:8px;padding-top:8px">
      <div class="headerTitle">构件类管理</div>
      <a-button type="primary" @click="onAdd" style="margin-right:40px">新增</a-button>
    </div>
    <section>
      <div class="selectDiv flexStartCenter">
        <a-input-search
          placeholder="名称"
          style="width: 140px;margin-right:40px"
          @search="selectSearch"
          @change="searchChange"
        />
      </div>
      <div class="selectDivBottom"></div>
    </section>
    <!-- :loading="tableLoading" -->
    <!-- <a-spin :spinning="tableLoading"> -->
    <!-- <div class="tableDiv">
        <a-spin :spinning="tableLoading">
          <vxeTableCom
            :tableData="tableData"
            :loading="loading"
            detailName
            tableTitle="wbs管理"
            @tableDetail="tableDetail"
          ></vxeTableCom>
        </a-spin>
      </div>
      <div style="position:absolute;bottom:0;width:calc(100% - 540px);">
        <vxePage style="width:100%" :pageData="pageData" @pageChange="pageChange" />
    </div>-->
    <div class="tableDiv">
      <vxe-table
        show-overflow
        row-id="id"
        highlight-hover-row
        highlight-current-row
        :data="tableData"
        @cell-click="cellClickEvent"
        align="center"
      >
        <vxe-column field="ebsTypeId" title="构件类编码"></vxe-column>
        <vxe-column field="ebsTypeName" title="构件类名称"></vxe-column>
        <vxe-column field="projectType" title="工程类型"></vxe-column>
        <vxe-column field="partial" title="所属分部分项"></vxe-column>
        <vxe-column field="processCount" title="工序数量"></vxe-column>
        <vxe-column field="keyProcessCount" title="关键工序"></vxe-column>
      </vxe-table>
    </div>
    <!-- 分页 -->
    <div style="position:absolute;bottom:0;width:calc(100% - 210px);">
      <div class="flexStartCenter" style="width:100%;" >
        <vxePage style="width:100%" :pageData="pageData" @pageChange="pageChange" />
        <svg-icon icon-class="shuaxin" @click="getPageList()" style="position:absolute;bottom:14px;left:609px;font-size:20px;color:#999;margin-left:15px;cursor:pointer"></svg-icon>
      </div>
    </div>
    <!-- </a-spin> -->

    <!-- 详情 -->
    <div class="tableDrawer">
      <tableDrawer :visibleDrawer="visibleDrawer" :title="drawerTitle" @onClose="onClose">
        <div v-if="visibleDrawer">
          <div class="tableDrawer_header_title">
            <img src="../../assets/img/ebs.png" alt />
            <span>{{ topSection.ebsTypeName }}</span>
          </div>
          <div class="tableDrawer_header_section">
            <div>
              构件类编码
              <span>{{ topSection.ebsTypeId }}</span>
            </div>
            <div>
              工程类型
              <span>{{ topSection.projectType }}</span>
            </div>
            <div>
              所属分部分项
              <span>{{ topSection.partial }}</span>
            </div>
          </div>
          <div class="tableDrawer_list">
            <span style="color:black;font-weight:600;">工序清单</span>
            <vxe-table
              highlight-hover-row
              highlight-current-row
              ref="xTableList"
              border="inner"
              show-overflow
              row-id="id"
              :loading="loading1"
              :data="tableData1"
              @cell-click="cellClickEventTableDrawer"
              align="center"
            >
              <vxe-column field="processId" title="工序编码"></vxe-column>
              <vxe-column field="processName" title="工序名称"></vxe-column>
              <vxe-column field="typeName" title="工序类型"></vxe-column>
              <vxe-column field="controlCount" title="管控项"></vxe-column>
            </vxe-table>
          </div>
          <div class="tableDrawer_section_title">
            <div>{{ texttitle }}</div>
            <div class="red-sm">（请先选中上方工序）</div>
          </div>
          <div class="tableDrawer_section_details">
            <div class="row1">
              工序类型：
              <a-button-group>
                <a-button :type="normalbtn" @click="norClick">一般工序</a-button>
                <a-button :type="impbtn" @click="impClick">关键工序</a-button>
              </a-button-group>
            </div>
            <div style="display:flex" class="row2" v-if="impbtn == 'primary'">
              管控要求：
              <input
                :value="requireValue"
                style="border:none; width:70%;"
                disabled="ture"
                type="text"
                name
                id
              />
              <span @click="requireValueEvent()">编辑</span>
            </div>
          </div>
          <div class="tableDrawer_vxeTable">
            <vxe-toolbar>
              <template #buttons>
                <vxe-button
                  style="background-color:rgb(34,138,255);color:white;"
                  @click="insertEvent()"
                >新增</vxe-button>
              </template>
            </vxe-toolbar>
            <vxe-table
              highlight-hover-row
              highlight-current-row
              border="inner"
              resizable
              show-overflow
              ref="xTable"
              height="500"
              :data="tableData3"
              @cell-dblclick="cellDBLClickEvent"
              align="center"
            >
              <vxe-column field="sort" title="管控项编码"></vxe-column>
              <!-- <vxe-column field="sex" title="Sex" :formatter="formatterSex"></vxe-column> -->
              <vxe-column field="technicalName" title="专业"></vxe-column>
              <vxe-column field="name" title="管控项名称" show-overflow></vxe-column>
              <vxe-column title="操作" width="180" show-overflow>
                <template #default="{ row }">
                  <div class="tableDrawer_vxeTable_btn">
                    <div style="color:rgb(24,158,255);cursor:pointer" @click="editEvent(row)">编辑</div>
                    <a-popconfirm
                      title="是否确认删除?"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="onConfim(row)"
                      @cancel="onCancel"
                    >
                      <div style="color:rgb(255,0,0);cursor:pointer">删除</div>
                    </a-popconfirm>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
            <!-- 管控要求编辑 -->
            <vxe-modal
              v-model="showEdit1"
              :title="selectRow ? '编辑' : '新增'"
              width="800"
              min-width="600"
              min-height="300"
              :loading="submitLoading"
              resize
              destroy-on-close
            >
              <vxe-form
                :data="formDataRequire"
                title-align="right"
                title-width="100"
                @submit="requireSubmitEvent"
              >
                <vxe-form-item field="require" title="管控要求" :span="20" :item-render="{}">
                  <template #default="{ data }">
                    <vxe-input v-model="data.require" placeholder="请输入管控要求  "></vxe-input>
                  </template>
                </vxe-form-item>
                <vxe-form-item align="center" title-align="left" :span="24">
                  <template #default>
                    <vxe-button type="submit">提交</vxe-button>
                  </template>
                </vxe-form-item>
              </vxe-form>
            </vxe-modal>

            <!-- 编辑页面 -->
            <vxe-modal
              v-model="showEdit"
              :title="selectRow ? '编辑' : '新增'"
              width="800"
              min-width="600"
              min-height="300"
              :loading="submitLoading"
              resize
              destroy-on-close
            >
              <template #default>
                <vxe-form
                  :data="formData"
                  title-align="right"
                  title-width="100"
                  @submit="submitEvent"
                >
                  <!-- <vxe-form-item
                    :title="tableDetailFormTitle"
                    title-align="left"
                    :title-width="200"
                    :span="24"
                  ></vxe-form-item>-->
                  <vxe-form-item field="sort" title="管控项编码" :span="12">
                    <template #default="{ data }">
                      <vxe-input v-model="data.sort" placeholder="请输入管控项编码  "></vxe-input>
                    </template>
                  </vxe-form-item>

                  <vxe-form-item field="technical" title="专业" :span="12" :item-render="{}">
                    <template #default="{ data }">
                      <vxe-select v-model="data.technical" transfer>
                        <vxe-option
                          v-for="item in technicalList"
                          :key="item.value"
                          :value="item.value"
                          :label="item.label"
                        ></vxe-option>
                      </vxe-select>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item field="name" title="管控项名称" :span="12" :item-render="{}">
                    <template #default="{ data }">
                      <vxe-input v-model="data.name" placeholder="请输入管控项名称"></vxe-input>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item align="center" title-align="left" :span="24">
                    <template #default>
                      <vxe-button type="submit">提交</vxe-button>
                      <!-- <vxe-button type="reset">重置</vxe-button> -->
                    </template>
                  </vxe-form-item>
                </vxe-form>
              </template>
            </vxe-modal>
          </div>
        </div>
      </tableDrawer>
    </div>
  </div>
</template>

<script>
import tableDrawer from '@/components/drawer/tableDrawer'
import vxePage from '@/components/vxePage/index'
import {
  pagingQuery,
  ebsTypeGet,
  ebsTypeProcessQueryList,
  ebsTypeProcessUpdate,
  processControlWebAdd,
  processControlDelete,
  processControlUpdate
} from '@/api/compontClassMange.js'
export default {
  name: 'compontClassMange',
  data() {
    return {
      ebsTypeId: '',
      ebsTypeName: '',
      processId: '',
      processName: '',
      texttitle: '', //一般工序、关键工序 配置标题
      processControlList: [], //管控项
      requireValue: '', //管控要求内容
      id: '',
      procedureId: '',
      normalbtn: 'normal', //一般工序按钮类型 用于控制样式
      impbtn: 'primary', //一般工序按钮类型 用于控制样式
      likeName: '', //搜索字段
      drawerTitle: '',
      visibleDrawer: false,
      list1: [],
      filterName: '',
      submitLoading: false,
      selectRow: null,
      showEdit: false,
      showEdit1: false,
      loading1: false,
      tableLoading: false,
      tableData: [],
      topSection: [],
      tableData1: [],
      tableData3: [],
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 20
      },
      technicalList: [
        {
          label: '工序',
          value: '1'
        },
        {
          label: '测量',
          value: '2'
        },
        {
          label: '试验',
          value: '3'
        }
      ],
      formData: {
        sort: null,
        technical: null,
        name: null
      },
      formDataRequire: {
        require: null
      },
      drawTableDetailFlag: false,
      tableDetailUpdateId: '',
      tableDetailFormTitle: '',
      rules: {
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'change'
          },
          {
            required: true,
            message: '请输入整数',
            trigger: 'change',
            pattern: new RegExp(/^[0-9]\d*$/, 'g')
          }
        ]
      }
    }
  },
  components: {
    tableDrawer,
    vxePage
  },
  created() {
    // this.findList1()
  },
  mounted() {
    this.getPageList()
  },
  methods: {
    onAdd() {
      this.$message.destroy()
      this.$message.success('请通过BIM协同平台配置')
    },
    formatterTechnical({ cellValue }) {
      let item = this.technicalList.find((item) => item.value === cellValue)
      return item ? item.label : ''
    },
    //分页切换
    pageChange(currentPage, pageSize) {
      this.pageData.currentPage = currentPage
      this.pageData.pageSize = pageSize
      this.getPageList()
    },
    //pagingQuery 接口
    getPageList() {
      this.tableLoading = true
      let data = {
        page: this.pageData.currentPage,
        size: this.pageData.pageSize,
        likeName: this.likeName
      }
      pagingQuery(data).then((res) => {
        // console.log(res)
        this.tableData = res.data
        this.pageData.totalResult = res.total
        this.tableLoading = false
      })
    },
    //搜索
    searchChange(data) {
      this.likeName = data.target.value
    },
    selectSearch(data) {
      // console.log(data)
      // this.likeName = data
      this.pageData.currentPage = 1
      this.getPageList()
    },

    cellClickEvent({ row, column }) {
      console.log({ row })
      console.log(column)
      this.id = row.id
      this.visibleDrawer = true
      let data = {
        id: this.id
      }
      ebsTypeGet(data).then((res) => {
        console.log(res)
        this.topSection = res.data
        res.data.processList.forEach((item) => {
          if (item.type == 1) {
            item.typeName = '一般工序'
          } else {
            item.typeName = '关键工序'
          }
        })
        this.tableData1 = res.data.processList
        if (res.data.processList.length > 0) {
          this.drawTableDetailFlag = true
          this.$refs.xTableList.setCurrentRow(this.tableData1[0])
          let firstType = res.data.processList[0].type
          this.procedureId = res.data.processList[0].id
          this.ebsTypeId = res.data.processList[0].ebsTypeId
          this.requireValue = res.data.processList[0].require
          this.ebsTypeName = res.data.processList[0].ebsTypeName
          this.processId = res.data.processList[0].processId
          this.processName = res.data.processList[0].processName
          if (firstType == 1) {
            this.normalbtn = 'primary'
            this.impbtn = 'normal'
            this.texttitle = '一般工序配置'
          } else {
            this.normalbtn = 'normal'
            this.impbtn = 'primary'
            this.texttitle = '关键工序配置'
          }

          let data = {
            ebsTypeId: this.ebsTypeId,
            ebsTypeName: this.ebsTypeName,
            processId: this.processId,
            processName: this.processName
          }

          ebsTypeProcessQueryList(data).then((res) => {
            res.data.forEach((item) => {
              switch (item.technical) {
                case '1':
                  item.technicalName = '工序'
                  break
                case '2':
                  item.technicalName = '测量'
                  break
                default:
                  item.technicalName = '试验'
                  break
              }
            })

            this.tableData3 = res.data
          })
        } else {
          this.drawTableDetailFlag = false
        }
      })
    },
    cellClickEventTableDrawer(row, column) {
      console.log({ row })

      let firstType = row.row.type
      this.procedureId = row.row.id
      this.ebsTypeId = row.row.ebsTypeId
      this.requireValue = row.row.require
      this.ebsTypeName = row.row.ebsTypeName
      this.processId = row.row.processId
      this.processName = row.row.processName
      if (firstType == 1) {
        this.normalbtn = 'primary'
        this.impbtn = 'normal'
        this.texttitle = '一般工序配置'
      } else {
        this.normalbtn = 'normal'
        this.impbtn = 'primary'
        this.texttitle = '关键工序配置'
      }

      let data = {
        ebsTypeId: row.row.ebsTypeId,
        ebsTypeName: row.row.ebsTypeName,
        processId: row.row.processId,
        processName: row.row.processName
      }

      ebsTypeProcessQueryList(data).then((res) => {
        res.data.forEach((item) => {
          switch (item.technical) {
            case '1':
              item.technicalName = '工序'
              break
            case '2':
              item.technicalName = '测量'
              break
            default:
              item.technicalName = '试验'
              break
          }
        })

        this.tableData3 = res.data
      })
    },
    norClick() {
      this.normalbtn = 'primary'
      this.impbtn = 'normal'
       this.texttitle = '一般工序配置'
      this.requireValue = ''
      let data1 = {
        id: this.procedureId,
        type: '1'
        // require: data.data.require
      }
      ebsTypeProcessUpdate(data1).then((res) => {
        console.log(res)
        let data = {
          id: this.id
        }
        ebsTypeGet(data).then((res) => {
          console.log(res)
          this.topSection = res.data
          res.data.processList.forEach((item) => {
            if (item.type == 1) {
              item.typeName = '一般工序'
            } else {
              item.typeName = '关键工序'
            }
          })
          this.tableData1 = res.data.processList
        })
      })
    },
    impClick() {
      this.normalbtn = 'normal'
      this.impbtn = 'primary'
       this.texttitle = '关键工序配置'
      let data1 = {
        id: this.procedureId,
        type: '2'
        // require:data.data.require
      }
      ebsTypeProcessUpdate(data1).then((res) => {
        console.log(res)
        let data = {
          id: this.id
        }
        ebsTypeGet(data).then((res) => {
          console.log(res)
          this.topSection = res.data
          res.data.processList.forEach((item) => {
            if (item.type == 1) {
              item.typeName = '一般工序'
            } else {
              item.typeName = '关键工序'
            }
          })
          this.tableData1 = res.data.processList
        })
      })
    },
    //   抽屉按钮点击
    cellDBLClickEvent({ row }) {
      this.editEvent(row)
    },

    //管控要求编辑点击
    requireValueEvent() {
      this.showEdit1 = true
      // this.formDataRequire = {
      //   require: ''
      // }
      this.formDataRequire.require = this.requireValue
    },
    //管控要求编辑提交
    requireSubmitEvent(data) {
      this.submitLoading = true
      // setTimeout(() => {
      this.submitLoading = false
      this.showEdit1 = false
      this.requireValue = data.data.require
      console.log(data)
      console.log(this.requireValue)
      let data1 = {
        id: this.procedureId,
        require: data.data.require
      }
      ebsTypeProcessUpdate(data1).then((res) => {
        console.log(res)
        let data = {
          id: this.id
        }
        ebsTypeGet(data).then((res) => {
          console.log(res)
          this.topSection = res.data
          res.data.processList.forEach((item) => {
            if (item.type == 1) {
              item.typeName = '一般工序'
            } else {
              item.typeName = '关键工序'
            }
          })
          this.tableData1 = res.data.processList
        })
      })
      // }, 500)
    },
    // 新增按钮点击
    insertEvent() {
      this.tableDetailFormTitle = '新增'
      this.tableDetailUpdateId = ''
      this.formData = {
        sort: '',
        name: '',
        technical: ''
      }
      this.selectRow = null
      this.showEdit = true
    },
    editEvent(row) {
      this.tableDetailFormTitle = '编辑'
      this.tableDetailUpdateId = row.id
      this.formData = {
        sort: row.sort,
        name: row.name,
        technical: row.technical
      }
      this.selectRow = row
      this.showEdit = true
    },
    // async removeEvent(row) {
    //   const type = await this.$XModal.confirm('您确定要删除该数据?')
    //   const $table = this.$refs.xTable
    //   if (type === 'confirm') {
    //     $table.remove(row)
    //   }
    // },
    submitEvent(data) {
      const $table = this.$refs.xTable
      if (this.formData.name==null) {
        this.formData.name=''
      }
      if (this.formData.sort==null) {
        this.formData.sort=''
      }
       if (this.formData.technical==null) {
        this.formData.technical=''
      }
      if (this.formData.name.trim() == '') {
        this.$message.destroy()
        this.$message.error('请输入管控项名称')
      } else if (this.formData.sort.toString().trim() == '') {
        this.$message.destroy()
        this.$message.error('请输入管控项编码')
      } else if (!/^[0-9]\d*$/.test(this.formData.sort.toString().trim())) {
        this.$message.destroy()
        this.$message.error('管控项编码必须是整数')
      } else if (this.formData.technical.trim() == '') {
        this.$message.destroy()
        this.$message.error('请选择专业')
      } else {
        // this.submitLoading = true

        // this.submitLoading = false

        if (this.selectRow) {
          let data1 = {
            id: this.tableDetailUpdateId,
            ebsTypeId: this.ebsTypeId,
            ebsTypeName: this.ebsTypeName,
            processId: this.processId,
            processName: this.processName,
            name: this.formData.name,
            technical: this.formData.technical,
            sort: this.formData.sort,
            createId: this.$store.state.userInfo.id
          }
          processControlUpdate(data1).then((res) => {
            if (res.code == 200) {
              this.$message.destroy()
              this.$message.success('编辑成功')
              this.showEdit = false
              this.gettableDetailList()
            } else {
              // this.showEdit =
              this.$message.destroy()
              this.$message.error(res.message)
            }
          })
        } else {
          let data2 = {
            ebsTypeId: this.ebsTypeId,
            ebsTypeName: this.ebsTypeName,
            processId: this.processId,
            processName: this.processName,
            name: this.formData.name,
            technical: this.formData.technical,
            sort: this.formData.sort,
            createId: this.$store.state.userInfo.id
          }
          processControlWebAdd(data2).then((res) => {
            if (res.code == 200) {
              this.$message.destroy()
              this.$message.success('新增成功')
              this.showEdit = false
              this.gettableDetailList()
            } else {
              this.$message.destroy()
              this.$message.error(res.message)
            }
          })
        }
      }
    },

    onClose(data) {
      this.visibleDrawer = data
      this.getPageList()
    },
    gettableDetailList() {
      let data = {
        ebsTypeId: this.ebsTypeId,
        ebsTypeName: this.ebsTypeName,
        processId: this.processId,
        processName: this.processName
      }

      ebsTypeProcessQueryList(data).then((res) => {
        res.data.forEach((item) => {
          switch (item.technical) {
            case '1':
              item.technicalName = '工序'
              break
            case '2':
              item.technicalName = '测量'
              break
            default:
              item.technicalName = '试验'
              break
          }
        })

        this.tableData3 = res.data
      })
    },

    onConfim(row) {
      processControlDelete({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message.destroy()
          this.$message.success('删除成功')
          let data = {
            ebsTypeId: this.ebsTypeId,
            ebsTypeName: this.ebsTypeName,
            processId: this.processId,
            processName: this.processName
          }

          ebsTypeProcessQueryList(data).then((res) => {
            res.data.forEach((item) => {
              switch (item.technical) {
                case '1':
                  item.technicalName = '工序'
                  break
                case '2':
                  item.technicalName = '测量'
                  break
                default:
                  item.technicalName = '试验'
                  break
              }
            })

            this.tableData3 = res.data
          })
        }
      })
    },
    onCancel(e) {}
  }
}
</script>

<style lang="less" scoped>
.tableDiv {
  height: calc(100vh - 220px);
}
.red-sm {
  color: red;
  font-size: 13px;
  font-weight: 500;
}
.headerbgw {
  background-color: white;
}
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}

.headerTitle {
  font-size: 18px;
  font-weight: 600;
  margin-left: 15px;
}

.tableDrawer_header_title {
  color: black;
  font-size: 16px;
  span {
    margin-left: 15px;
  }
}
.tableDrawer_header_section {
  padding: 30px 0;
  span {
    color: black;
    margin-left: 40px;
  }
}
.tableDrawer_section_title {
  padding: 30px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}
.tableDrawer_section_details {
  padding: 0 0 20px;
  .row1 {
    margin-bottom: 20px;
  }
}
.tableDrawer_vxeTable_btn {
  display: flex;
  :nth-child(1) {
    margin-right: 20px;
  }
}
.selectDiv {
  background: #fcfcfc;
  padding: 8px 16px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.selectDivBottom {
  background: #f7f9fc;
  height: 7px;
}
</style>
